import React from 'react'
import { useParams } from 'react-router-dom'
import { Heart, ShoppingCart, BookOpen, Clock, Award, Share2, Bookmark } from 'lucide-react'
import { motion } from 'framer-motion'
import { cn } from '../utils/cn'

const BookDetail: React.FC = () => {
  const { id } = useParams()

  // 模拟绘本详情数据
  const book = {
    id: id || '1',
    title: '小熊宝宝绘本',
    author: '佐佐木洋子',
    cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20little%20bear%20character%20in%20warm%20children%20book%20illustration%20style%20soft%20colors%20gentle%20lighting&image_size=portrait_4_3',
    description: '这是一套培养宝宝良好习惯的温馨绘本。通过小熊宝宝的日常生活，孩子们可以学习到吃饭、睡觉、洗澡等生活技能，同时培养良好的生活习惯。',
    ageRange: [0, 3] as [number, number],
    category: '习惯养成',
    tags: ['习惯', '动物', '温馨', '生活技能'],
    rating: 4.8,
    price: 28.8,
    isFree: false,
    pages: 24,
    publisher: '连环画出版社',
    publishDate: '2023-06',
    isbn: '978-7-5056-1234-5',
    previewPages: [
      'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=little%20bear%20washing%20hands%20in%20children%20book%20illustration%20style%20soft%20colors%20educational&image_size=portrait_4_3',
      'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=little%20bear%20eating%20breakfast%20children%20book%20illustration%20warm%20family%20scene&image_size=portrait_4_3',
      'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=little%20bear%20brushing%20teeth%20children%20book%20illustration%20daily%20routine&image_size=portrait_4_3'
    ],
    reviews: [
      {
        id: '1',
        user: '宝妈小李',
        avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20mom%20avatar%20cartoon%20style%20warm%20colors%20friendly%20smile&image_size=square',
        rating: 5,
        comment: '宝宝很喜欢这套绘本，每天都要看一遍，对培养生活习惯很有帮助！',
        date: '2024-01-15',
        helpful: 23
      },
      {
        id: '2',
        user: '育儿达人',
        avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=friendly%20parent%20avatar%20cartoon%20style%20warm%20colors&image_size=square',
        rating: 4,
        comment: '画面很温馨，故事情节简单易懂，适合低龄宝宝阅读。',
        date: '2024-01-10',
        helpful: 15
      }
    ]
  }

  const [isFavorited, setIsFavorited] = React.useState(false)
  const [isBookmarked, setIsBookmarked] = React.useState(false)

  const StarRating: React.FC<{ rating: number; size?: 'sm' | 'md' | 'lg' }> = ({ rating, size = 'md' }) => {
    const sizes = {
      sm: 'w-3 h-3',
      md: 'w-4 h-4',
      lg: 'w-5 h-5'
    }

    return (
      <div className="flex items-center space-x-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <svg
            key={star}
            className={cn(
              sizes[size],
              star <= rating ? 'text-yellow-400 fill-current' : 'text-gray-300'
            )}
            viewBox="0 0 20 20"
          >
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
          </svg>
        ))}
      </div>
    )
  }

  const ReviewCard: React.FC<{ review: any }> = ({ review }: { review: any }) => {
    return (
      <div className="bg-gray-50 rounded-2xl p-4">
        <div className="flex items-start space-x-3">
          <img
            src={review.avatar}
            alt={review.user}
            className="w-10 h-10 rounded-full"
          />
          <div className="flex-1">
            <div className="flex items-center justify-between mb-2">
              <div>
                <h4 className="font-medium text-gray-800">{review.user}</h4>
                <div className="flex items-center space-x-2">
                  <StarRating rating={review.rating} size="sm" />
                  <span className="text-sm text-gray-500">{review.date}</span>
                </div>
              </div>
            </div>
            <p className="text-gray-700 mb-3">{review.comment}</p>
            <div className="flex items-center space-x-4 text-sm text-gray-500">
              <button className="flex items-center space-x-1 hover:text-primary-600">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
                </svg>
                <span>有用 ({review.helpful})</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-cream-50 to-sky-50">
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 左侧：绘本封面和基本信息 */}
          <div className="lg:col-span-1">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="bg-white rounded-3xl shadow-xl p-6 sticky top-24"
            >
              <div className="aspect-[3/4] relative overflow-hidden rounded-2xl mb-6">
                <img
                  src={book.cover}
                  alt={book.title}
                  className="w-full h-full object-cover"
                />
                {book.isFree && (
                  <div className="absolute top-4 right-4 bg-leaf-500 text-white px-3 py-2 rounded-full text-sm font-bold">
                    免费
                  </div>
                )}
              </div>

              <h1 className="text-2xl font-bold text-gray-800 mb-2">{book.title}</h1>
              <p className="text-gray-600 mb-4">作者：{book.author}</p>

              <div className="space-y-3 mb-6">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">评分</span>
                  <div className="flex items-center space-x-2">
                    <StarRating rating={book.rating} />
                    <span className="font-medium">{book.rating}</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">适合年龄</span>
                  <span className="font-medium">{book.ageRange[0]}-{book.ageRange[1]}岁</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">页数</span>
                  <span className="font-medium">{book.pages}页</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">出版社</span>
                  <span className="font-medium">{book.publisher}</span>
                </div>
              </div>

              <div className="space-y-3">
                <div className="flex space-x-3">
                  <button
                    onClick={() => setIsFavorited(!isFavorited)}
                    className={cn(
                      "flex-1 py-3 rounded-2xl border-2 transition-all duration-200 flex items-center justify-center space-x-2",
                      isFavorited
                        ? "bg-red-50 border-red-200 text-red-600"
                        : "bg-gray-50 border-gray-200 text-gray-600 hover:bg-red-50 hover:border-red-200 hover:text-red-600"
                    )}
                  >
                    <Heart className={cn("w-5 h-5", isFavorited && "fill-current")} />
                    <span>收藏</span>
                  </button>
                  <button
                    onClick={() => setIsBookmarked(!isBookmarked)}
                    className={cn(
                      "flex-1 py-3 rounded-2xl border-2 transition-all duration-200 flex items-center justify-center space-x-2",
                      isBookmarked
                        ? "bg-primary-50 border-primary-200 text-primary-600"
                        : "bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary-50 hover:border-primary-200 hover:text-primary-600"
                    )}
                  >
                    <Bookmark className={cn("w-5 h-5", isBookmarked && "fill-current")} />
                    <span>标记</span>
                  </button>
                </div>
                <button className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium shadow-lg hover:shadow-xl flex items-center justify-center space-x-2">
                  <ShoppingCart className="w-5 h-5" />
                  <span>{book.isFree ? '免费阅读' : `¥${book.price} 购买`}</span>
                </button>
              </div>
            </motion.div>
          </div>

          {/* 右侧：详细信息 */}
          <div className="lg:col-span-2 space-y-8">
            {/* 简介 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="bg-white rounded-3xl shadow-xl p-6"
            >
              <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <BookOpen className="w-6 h-6 text-primary-500 mr-2" />
                绘本简介
              </h2>
              <p className="text-gray-700 leading-relaxed mb-4">{book.description}</p>
              <div className="flex flex-wrap gap-2">
                {book.tags.map((tag) => (
                  <span key={tag} className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm">
                    #{tag}
                  </span>
                ))}
              </div>
            </motion.div>

            {/* 预览页面 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="bg-white rounded-3xl shadow-xl p-6"
            >
              <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <Clock className="w-6 h-6 text-sky-500 mr-2" />
                预览页面
              </h2>
              <div className="grid grid-cols-3 gap-4">
                {book.previewPages.map((page, index) => (
                  <div key={index} className="aspect-[3/4] rounded-2xl overflow-hidden cursor-pointer hover:scale-105 transition-transform duration-200">
                    <img
                      src={page}
                      alt={`预览页 ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </div>
                ))}
              </div>
            </motion.div>

            {/* 用户评价 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="bg-white rounded-3xl shadow-xl p-6"
            >
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-bold text-gray-800 flex items-center">
                  <Award className="w-6 h-6 text-leaf-500 mr-2" />
                  用户评价
                </h2>
                <div className="flex items-center space-x-2">
                  <StarRating rating={book.rating} />
                  <span className="font-medium text-gray-600">{book.rating} 分</span>
                </div>
              </div>
              <div className="space-y-4">
                {book.reviews.map((review) => (
                  <ReviewCard key={review.id} review={review} />
                ))}
              </div>
            </motion.div>

            {/* 推荐绘本 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
              className="bg-white rounded-3xl shadow-xl p-6"
            >
              <h2 className="text-xl font-bold text-gray-800 mb-6 flex items-center">
                <Share2 className="w-6 h-6 text-primary-500 mr-2" />
                相关推荐
              </h2>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {/* 这里可以添加推荐绘本的卡片 */}
                <div className="text-center p-4 border-2 border-dashed border-gray-200 rounded-2xl">
                  <p className="text-gray-500 text-sm">更多推荐绘本</p>
                  <p className="text-gray-400 text-xs mt-1">即将上线</p>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default BookDetail